<template>
	<!-- 风险分析 -->
	<view class="p-10">
		<view class="card">
			<uni-section type="line" class="mb-10" title="风险变化趋势">
				<view class="flex s-center m-center">
					<u-radio-group v-model="radioValue" placement="row">
						<u-radio label="日" name="day"></u-radio>
						<u-radio label="月" class="m-l-10" name="month"></u-radio>
						<u-radio label="季" class="m-l-10" name="season"></u-radio>
					</u-radio-group>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" ontouch />
				</view>
			</uni-section>
		</view>
		<view class="card">
			<uni-section type="line" class="mb-10" title="风险分布统计">
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts1" :chartData="chartData1" ontouch />
				</view>
			</uni-section>
		</view>
	</view>
</template>
<script setup>
import { ref, watch } from 'vue';
import { riskChangeChart, riskLocationDistributeChart } from '@/api/hidden-danger.js';
const baseOpts = {
	color: ['#0853FF'],
	padding: [20, 0, 5, 0],
	dataLabel: false,
	enableScroll: true,
	fontSize: 10,
	legend: {
		show: false
	}
};
let chartData = ref({}),
	chartData1 = ref({}),
	radioValue = ref('day');
const opts = {
	extra: {
		line: {
			gridType: 'radar',
			gridColor: '#CCCCCC',
			gridCount: 4,
			opacity: 0.4,
			max: 0,
			labelColor: '#0853FF',
			labelShow: true,
			border: true
		}
	},
	xAxis: {
		rotateLabel: true,
		rotateAngle: 30,
		itemCount: 6
	},
	...baseOpts
};
const opts1 = {
	extra: {
		column: {
			type: 'group',
			width: 10
		}
	},
	xAxis: {
		rotateLabel: true,
		rotateAngle: 30,
		itemCount: 6,
		format: 'text'
	},
	...baseOpts
};
// 风险变化趋势
const getData = async (type) => {
	const { data } = await riskChangeChart({
		type
	});
	let res = {
		categories: data.names,
		series: [
			{
				name: '新增风险',
				data: data.nums
			}
		]
	};
	chartData.value = JSON.parse(JSON.stringify(res));
};
// 风险分布统计
const getData1 = async () => {
	const { data } = await riskLocationDistributeChart();
	let res = {
		categories: data.names,
		series: [
			{
				name: '',
				data: data.nums
			}
		]
	};
	chartData1.value = JSON.parse(JSON.stringify(res));
};
watch(
	() => radioValue.value,
	(val) => {
		console.log(val);
		getData(val);
	},
	{
		immediate: true
	}
);
getData1();
</script>
<style lang="scss" scoped>
:deep(.u-radio-group--row) {
	justify-content: center;
}
</style>
